<template>
  <div>
    <header>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类参数</el-breadcrumb-item>
      </el-breadcrumb>
    </header>

    <el-alert
      title="只允许为第三级分类设置相关参数"
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-form :model="formData">
      <el-form-item label="请选择商品分类">
        <!-- <template> -->
        <el-cascader
          v-model="formData.cascaderVal"
          :options="options"
          @change="changeHandle()"
          :props="props"
        >
        </el-cascader>
        <!-- </template> -->
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="动态参数" name="many"></el-tab-pane>
      <el-tab-pane label="静态属性" name="only"></el-tab-pane>
    </el-tabs>
    <!-- 添加参数 -->
    <el-row>
      <el-button
        type="primary"
        v-if="flag"
        @click="addmany()"
        :disabled="formData.cascaderVal.length !== 3"
        >动态参数</el-button
      >
      <el-button
        type="primary"
        v-else
        @click="addmany()"
        :disabled="formData.cascaderVal.length !== 3"
        >静态属性</el-button
      >
    </el-row>
    <!-- 展示列表 -->
    <template>
      <el-table :data="showList" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="{ row }">
            <el-tag
              closable
              @close="handleClose(row, item)"
              v-for="(item, index) in row.arr"
              :key="index"
              >{{ item }}
            </el-tag>
            <!--自定义tag标签-->
            <el-input
              class="input-new-tag"
              v-if="row.inputVisible"
              v-model="row.inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm(row)"
              @blur="handleInputConfirm(row)"
            >
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(row)"
              >+ New Tag</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="序号" prop="id" width="50">
          <template slot-scope="{ $index }">{{ $index + 1 }} </template>
        </el-table-column>
        <el-table-column label="参数名称" prop="attr_name"> </el-table-column>
        <el-table-column label="操作" prop="desc">
          <template slot-scope="{ row }"
            ><el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="bj(row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="del(row)"
              >删除</el-button
            ></template
          ></el-table-column
        >
      </el-table>
    </template>
    <!-- 修改页面弹框 -->
    <el-dialog :title="title" :visible.sync="tabShow">
      <el-form :model="form">
        <el-form-item :label="title" label-width="120px" required="">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="makeSurechange">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加属性 -->
    <el-dialog :title="title" :visible.sync="showTab">
      <el-form :model="formAdd">
        <el-form-item :label="title" label-width="120px" required="">
          <el-input v-model="formAdd.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getcates, updateGoods, delGoods, changeGoods, delpropApi, addGoods, addAttributes } from '@/api/goods'
export default {
  name: 'ParamsCom',
  data () {
    return {
      inputVisible: false,
      inputValue: '',
      options: [],
      //控制删除添加按钮的name
      form: {
        name: ''
      },
      //添加时需要的name
      formAdd: {
        name: ''
      },
      //三级联动的id数组
      formData: {
        cascaderVal: []
      },
      props: { label: 'cat_name', value: 'cat_id', children: 'children' },
      flag: true,//判断是动态还是静态
      activeName: 'many',
      sel: 'many',//控制many , 或者 only
      disabled: true,
      showList: [],//三级选出来的数组
      valueShow: [],
      title: '',
      tabShow: false,//编辑弹框
      newList: {},//当前哪项的row
      showTab: false,//添加弹框
      tagLIst: [],
      dynamicTags: [],
    }
  },
  created () {
    this.goodsList()
  },
  computed: {
  },
  methods: {
    //渲染商品分类三级联动
    async goodsList () {
      const res = await getcates()
      // console.log(res.data, '9090');
      this.options = res.data
    },

    handleClick (tab, event) {
      console.log(tab, event);
      if (tab.label == '静态属性') {
        this.flag = false
        this.sel = 'only'
      } else {
        this.flag = true
        this.sel = 'many'
      }
      this.changeHandle()
    },
    async changeHandle (val) {


      this.arr = val

      const id = this.formData.cascaderVal[2]
      const res = await updateGoods(id, { sel: this.activeName })

      res.data.forEach(item => {
        item.inputVisible = false,
          item.inputValue = ''
        item.arr = item.attr_vals.split(',')
      })
      this.showList = res.data
      // console.log(this.showList, 'list')


    },
    //删除按钮
    del (data) {
      // console.log(data);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        await delGoods(data.cat_id + '', data.attr_id + '')

        this.changeHandle()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //编辑系列
    bj (data) {
      console.log(data);
      if (data.attr_sel == 'many') {
        this.title = '动态参数'
      } else {
        this.title = '静态属性'
      }
      this.tabShow = true
      this.form.name = data.attr_name
      this.newList = data
    },
    //弹出框关闭按钮
    close () {
      this.tabShow = false
      this.showTab = false
      this.form.name = ''
      this.formAdd.name = ''
    },
    // 修改分类确定按钮
    makeSurechange () {
      // console.log(this.sel);
      changeGoods(this.newList.cat_id, this.newList.attr_id, {
        attr_name: this.form.name,
        attr_sel: this.sel
      })
      this.changeHandle()
      this.close()
    },
    // 添加分类
    addSure () {
      // console.log(this.formData.cascaderVal, this.formAdd.name);
      addGoods(this.formData.cascaderVal[2], {
        attr_name: this.formAdd.name,
        attr_sel: this.sel
      })
      this.changeHandle()
      this.close()
    },
    //弹出添加框
    addmany () {
      this.showTab = true
      this.title = this.sel == 'many' ? '动态参数' : '静态属性'
    },




    //点击删除标签
    handleClose (row, tag) {
      row.arr.splice(row.arr.indexOf(tag), 1)
      const id = this.formData.cascaderVal[2]
      this.geteditpropApi(id, row)
    },
    //删除标签 id :三级id row:当前哪项筛选出来的
    async geteditpropApi (id, row) {
      await delpropApi(id, row.attr_id, row.attr_name, row.attr_sel, row.attr_vals)
      this.$message.success('修改成功')
    },
    //tag文本框失去焦点,或者点击enter触发
    async handleInputConfirm (row) {
      // console.log(row.inputVisible);
      if (row.inputValue.trim().length === 0) {
        row.inputValue = ''
        return row.inputVisible = false
      }
      row.arr.push(row.inputValue.trim())
      const id = this.formData.cascaderVal[2]
      await addAttributes(id, row)
      row.inputValue = ''
      row.inputVisible = false
    },
    // / tag按钮点击事件
    showInput (row) {
      row.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });

    }

  }
}


</script>
<style lang='scss'  scoped>
</style>